<template>
  <div class="message-area-container">
    <form
      id="form-container"
      class="form-container"
      ref="form-container"
      @submit.prevent="handleSubmit"
    >
      <div class="form-item">
        <div class="input-area">
          <input
            type="text"
            v-model="nickname"
            minlength="0"
            maxlength="10"
            placeholder="用户昵称"
          />
          <span class="tips">{{ nickname.trim().length }}/10</span>
        </div>
        <div class="error">{{ nicknameError }}</div>
      </div>
      <div class="form-item">
        <div class="text-area">
          <textarea
            min="0"
            max="300"
            v-model="content"
            placeholder="输入内容"
          ></textarea>
          <span class="tips">{{ content.trim().length }}/{{ 300 }}</span>
        </div>
        <div class="error">{{ contentError }}</div>
      </div>
      <div class="form-item">
        <button
          :disabled="isSubmitting"
          :class="{
            disabled: isSubmitting,
          }"
        >
          {{ isSubmitting ? "提交中..." : "提交" }}
        </button>
      </div>
    </form>
    <div class="commentBox" v-if="commentList.length">
      <h2 class="title">{{ title }}({{ subTitle }})</h2>
      <ul class="commentList">
        <li v-for="comment in commentList" :key="comment.id">
          <Avatar :url="comment.avatar" :size="44" />
          <div class="main">
            <div class="info">
              <div class="nickname">{{ comment.nickname }}</div>
              <div class="date">{{ formatDate(comment.createDate, true) }}</div>
            </div>
            <div class="content">{{ comment.content }}</div>
          </div>
        </li>
      </ul>
    </div>
    <div class="loading" v-show="isListLoading">
      <img src="../assets/loading.svg" alt="" />
    </div>
  </div>
</template>

<script>
import Avatar from "./Avatar.vue";
import formatDate from "../utils/formatDate.js";

export default {
  components: {
    Avatar,
  },
  props: {
    isListLoading: {
      type: Boolean,
      default: false,
    },
    commentList: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      required: true,
    },
    subTitle: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      isSubmitting: false,
      nickname: "",
      content: "",
      nicknameError: "",
      contentError: "",
    };
  },
  methods: {
    formatDate,
    handleSubmit() {
      const nickname = this.nickname.trim();
      const content = this.content.trim();
      this.nicknameError = nickname.length ? "" : "请填写昵称";
      this.contentError = content.length ? "" : "写填写内容";
      if (!nickname.length || !content.length) {
        return;
      }
      this.isSubmitting = true;
      this.$emit(
        "submit",
        {
          nickname: nickname,
          content: content,
        },
        (info) => {
          this.$showMessage({
            container: this.$refs["form-container"],
            content: info,
            type: "success",
            callback: () => {
              this.nickname = "";
              this.content = "";
              this.isSubmitting = false;
            },
          });
        }
      );
    },
  },
};
</script>

<style scoped lang="less">
@import "../styles/color.less";

.message-area-container {
  width: 100%;
  .form-container {
    margin-bottom: 20px;
    .form-item {
      margin-bottom: 8px;
      .error {
        margin-top: 6px;
        color: @danger;
        font-size: 14px;
        height: 20px;
        line-height: 20px;
      }
    }
    .input-area,
    .text-area {
      border: 1px dashed @gray;
      position: relative;
      border-radius: 3px;
      .tips {
        position: absolute;
        right: 5px;
        bottom: 5px;
        color: @gray;
        font-size: 12px;
      }
    }
    .input-area {
      width: 50%;
      input {
        width: 100%;
        display: block;
        padding: 0 15px;
        height: 40px;
        outline: none;
        border: none;
        background-color: transparent;
      }
    }
    .text-area {
      width: 100%;
      textarea {
        border: none;
        outline: none;
        resize: none;
        padding: 8px 15px;
        background-color: transparent;
        font-size: 14px;
        height: 120px;
      }
    }
    button {
      cursor: pointer;
      border: none;
      outline: none;
      width: 100px;
      height: 34px;
      color: #fff;
      border-radius: 4px;
      background: @primary;
      &:hover {
        background: darken(@primary, 10%);
      }
      &:disabled {
        background: lighten(@primary, 20%);
        cursor: not-allowed;
      }
    }
  }
  .commentBox {
    .title {
      font-size: 1.17em;
      margin: 30px 0 10px 0;
    }
    .commentList li {
      display: flex;
      border-bottom: 1px solid #eaebec;
      padding: 15px 0;
      .avatar-container {
        margin-right: 15px;
      }
      .main {
        min-width: 400px;
        flex: 1 1 auto;
        .info {
          display: flex;
          margin-bottom: 10px;
          justify-content: space-between;
          align-items: center;
          .nickname {
            color: #65a13b;
          }
          .date {
            font-size: 12px;
            color: @gray;
          }
        }
        .content {
          font-size: 14px;
        }
      }
    }
  }
    .loading {
      position: relative;
      width: 100%;
      height: 80px;
      img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
}
</style>